<template>
  <div class="app-container">
    <div v-loading="pageLoading" class="screen-container">
      <div class="screen-title" />
      <div class="screen-content">
        <template v-for="item in dataList">
          <fistLevelHeader :key="item.id" :title-img="item.titleImg" :item="item" />
          <div class="flex-container" :class="{ 'd-row': item.title === '人员教育培训' }">
            <template v-for="child in item.children">
              <containerComponent
                :key="child.id"
                :container-data="child"
                :style="{
                  width:
                    child.title === '学习资料情况'
                      ? '15%'
                      : child.title === '人员学习情况'
                        ? '25%'
                        : child.title === '考试情况'
                          ? '55%'
                          : '100%',
                }"
              >
                <planTable v-if="child.title === '月度采购计划'" :key="child.id" :table-data="child.data" />
                <tankComponent
                  v-if="
                    child.tanks &&
                      child.tanks.length &&
                      child.title !== '机场油库及航空加油站'
                  "
                  :key="child.id + '-tank'"
                  :tank-data="child.tanks"
                />
                <xizangDcTable v-if="child.title === '西藏公司本部配送中心'" :key="child.id" :table-data="child.data" />
                <template v-if="child.title === '机场油库及航空加油站'">
                  <tankComponent :key="child.id + '-youku-tank-new'" :tank-data="child.tanksYoukuNew" />
                  <div v-if="child.tanksYoukuNew && child.tanksYoukuNew.length" class="line-dash" />
                  <tankComponent :key="child.id + '-youku-tank-old'" :tank-data="child.tanksYoukuOld" />
                  <div v-if="child.tanksYoukuOld && child.tanksYoukuOld.length" class="line-dash" />
                  <tankComponent :key="child.id + '-lasa-tank'" :tank-data="child.tanksLasa" />

                  <!-- <airportAndStationTable
                    :table-data="child.dataLasa"
                    :key="child.id +'-lasa'"
                  ></airportAndStationTable> -->
                  <airportAndStationTable :key="child.id + '-youku'" :table-data="child.data" />
                </template>

                <linzhiTable v-if="child.title === '林芝供应站'" :key="child.id" :table-data="child.data" />
                <rikezeTable v-if="child.title === '日客则供应站'" :key="child.id" :table-data="child.data" />
                <aliTable v-if="child.title === '阿里供应站'" :key="child.id" :table-data="child.data" />
                <majorHazardTable v-if="child.title === '重大隐患平排查'" :key="child.id" :table-data="child.data" />
                <generalHazardTable v-if="child.title === '一般隐患治理'" :key="child.id" :table-data="child.data" />
                <riskLevelTable v-if="child.title === '风险分级管控'" :key="child.id" :table-data="child.data" />
                <learningMaterialTable v-if="child.title === '学习资料情况'" :key="child.id" :table-data="child.data" />
                <personnelLearningTable v-if="child.title === '人员学习情况'" :key="child.id" :table-data="child.data" />
                <examStatusTable v-if="child.title === '考试情况'" :key="child.id" :table-data="child.data" />
                <equipmentTable v-if="child.title === '设备设施管理'" :key="child.id" :table-data="child.data" />

                <lineChartComponent
                  v-if="child.charts && Object.keys(child.charts).length"
                  :key="child.id + '-chart'"
                  :is-refuel="child.title !== '西藏公司本部配送中心'"
                  :chart-data="child.charts"
                />
              </containerComponent>
            </template>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import { newGuid } from '@/utils/guidtool.js'
import { getScreenData } from '@/api/dataScreen/dataScreenApi.js'
import fistLevelHeader from './components/fistLevelHeader.vue'
import containerComponent from './components/containerComponent.vue'
import tankComponent from './components/tankComponent.vue'
import planTable from './components/tableComponents/planTable.vue'
import xizangDcTable from './components/tableComponents/xizangDcTable.vue'
import airportAndStationTable from './components/tableComponents/airportAndStationTable.vue'
import linzhiTable from './components/tableComponents/linzhiTable.vue'
import rikezeTable from './components/tableComponents/rikezeTable.vue'
import aliTable from './components/tableComponents/aliTable.vue'
import majorHazardTable from './components/tableComponents/majorHazardTable.vue'
import generalHazardTable from './components/tableComponents/generalHazardTable.vue'
import riskLevelTable from './components/tableComponents/riskLevelTable.vue'
import learningMaterialTable from './components/tableComponents/learningMaterialTable.vue'
import personnelLearningTable from './components/tableComponents/personnelLearningTable.vue'
import examStatusTable from './components/tableComponents/examStatusTable.vue'
import equipmentTable from './components/tableComponents/equipmentTable.vue'
import lineChartComponent from './components/lineChartComponent.vue'

export default {
  name: 'DataScreen',
  components: {
    fistLevelHeader,
    containerComponent,
    tankComponent,
    tankComponent,
    planTable,
    xizangDcTable,
    airportAndStationTable,
    linzhiTable,
    rikezeTable,
    aliTable,
    majorHazardTable,
    generalHazardTable,
    riskLevelTable,
    learningMaterialTable,
    personnelLearningTable,
    examStatusTable,
    equipmentTable,
    lineChartComponent
  },
  data() {
    return {
      dataList: [],
      pageLoading: false
    }
  },
  created() {
    this.getScreenDataList()
  },
  methods: {
    async getScreenDataList() {
      this.pageLoading = true
      try {
        const res = await getScreenData()
        if (res.code === 200) {
          const {
            monthlyPurchasePlan,
            xizangDistributionCenter,
            airportOilDepotAndStation,
            linzhiSupplyStation,
            rikezeSupplyStation,
            aliSupplyStation,
            majorHazardInspection,
            generalHazardInspection,
            riskLevelManagement,
            learningMaterialsStatus,
            personnelLearningStatus,
            examStatus,
            equipmentFacilityManagement
          } = res.data
          const planListData = []
          if (
            monthlyPurchasePlan?.tableData &&
            monthlyPurchasePlan?.tableData?.length
          ) {
            monthlyPurchasePlan?.tableData[0].forEach((item) => {
              if (item.detailInfos.length) {
                item.detailInfos.forEach((itm) => {
                  if (itm.onways.length) {
                    let totalSendWeight = itm.onways.reduce(
                      (total, onway) => total + (onway.sendWeight || 0),
                      0
                    )
                    totalSendWeight = Number(totalSendWeight.toFixed(3))
                    itm.onways.forEach((it, idx) => {
                      planListData.push({
                        ...item,
                        totalSendWeight,
                        detailInfo: itm,
                        onways: {
                          ...it,
                          index: idx + 1
                        }
                      })
                    })
                  } else {
                    planListData.push({
                      ...item,
                      detailInfo: itm,
                      totalSendWeight: 0,
                      onways: null
                    })
                  }
                })
              } else {
                planListData.push({
                  ...item,
                  detailInfo: null,
                  totalSendWeight: 0,
                  onways: null
                })
              }
            })
          }
          const airportAndStationData = []
          if (
            airportOilDepotAndStation?.tableDataYouku &&
            airportOilDepotAndStation?.tableDataYouku?.length
          ) {
            airportOilDepotAndStation?.tableDataYouku.forEach((item, index) => {
              item.workName = `${item.workName || ''}${airportOilDepotAndStation?.tableDataLasa?.[index]?.workName ? `,${airportOilDepotAndStation?.tableDataLasa?.[index]?.workName}` : ''}`
              airportAndStationData[index] = {
                ...item,
                rateJson: airportOilDepotAndStation?.tableDataLasa?.[index]?.rateJson || [],
                carInfo: airportOilDepotAndStation?.tableDataLasa?.[index]?.carInfo || '',
                averageFuelQuantity: airportOilDepotAndStation?.tableDataLasa?.[index]?.averageFuelQuantity || 0,
                days: airportOilDepotAndStation?.tableDataLasa?.[index]?.days || 0,
                fuelQuantity: airportOilDepotAndStation?.tableDataLasa?.[index]?.fuelQuantity || 0,
                oilCount: airportOilDepotAndStation?.tableDataLasa?.[index]?.oilCount || 0
              }
            })
          }
          let oilTanksNewAS = []
          let oilTanksOldAS = []
          if (airportOilDepotAndStation?.oilTanksYouku && airportOilDepotAndStation?.oilTanksYouku?.length) {
            const arr = airportOilDepotAndStation?.oilTanksYouku.map(item => {
              return {
                ...item,
                isOld:
                          !!(item.name.includes('旧') || item.name.includes('老'))
              }
            })
            oilTanksNewAS = arr.filter(item => !item.isOld)
            oilTanksOldAS = arr.filter(item => item.isOld)
          }
          this.dataList = [
            {
              id: newGuid(),
              title: '数据中心',
              titleImg: require('./../../assets/data-screen/screen-title-1.png'),
              children: [
                {
                  id: 100,
                  title: '月度采购计划',
                  titleImg: require('./../../assets/data-screen/screen-subtitle-1.png'),
                  path: 'Plan',
                  query: { deptId: 100 },
                  data: planListData
                }
              ]
            },
            {
              id: newGuid(),
              title: '生产数据报送',
              titleImg: require('./../../assets/data-screen/screen-title-2.png'),
              children: [
                {
                  id: 100,
                  title: '西藏公司本部配送中心',
                  titleImg: require('./../../assets/data-screen/screen-subtitle-2.png'),
                  path: 'Dc',
                  query: { deptId: 100 },
                  data: xizangDistributionCenter?.tableData || [],
                  tanks: xizangDistributionCenter?.oilTanks || [],
                  charts: xizangDistributionCenter?.chartData || []
                },
                {
                  id: 110,
                  title: '机场油库及航空加油站',
                  titleImg: require('./../../assets/data-screen/screen-subtitle-3.png'),
                  path: 'Depot|Station',
                  query: { deptId: 110 },
                  dataLasa: airportOilDepotAndStation?.tableDataLasa || [],
                  dataYouku: airportOilDepotAndStation?.tableDataYouku || [],
                  data: airportAndStationData,
                  tanksLasa: airportOilDepotAndStation?.oilTanksLasa
                    ? airportOilDepotAndStation?.oilTanksLasa.map((item) => {
                      return {
                        ...item,
                        isOld:
                          !!(item.name.includes('旧') || item.name.includes('老'))
                      }
                    })
                    : [],
                  tanksYoukuNew: oilTanksNewAS,
                  tanksYoukuOld: oilTanksOldAS,
                  charts: airportOilDepotAndStation?.chartData || []
                },
                {
                  id: 107,
                  title: '林芝供应站',
                  titleImg: require('./../../assets/data-screen/screen-subtitle-4.png'),
                  path: 'Sc',
                  query: { deptId: 107 },
                  data: linzhiSupplyStation?.tableData || [],
                  tanks: linzhiSupplyStation?.oilTanks
                    ? linzhiSupplyStation?.oilTanks.map((item) => {
                      return {
                        ...item,
                        isOld:
                          !!(item.name.includes('旧') || item.name.includes('老'))
                      }
                    })
                    : [],
                  charts: linzhiSupplyStation?.chartData || {}
                },
                {
                  id: 109,
                  title: '日客则供应站',
                  titleImg: require('./../../assets/data-screen/screen-subtitle-5.png'),
                  path: 'Sc',
                  query: { deptId: 109 },
                  data: rikezeSupplyStation?.tableData || [],
                  tanks: rikezeSupplyStation?.oilTanks
                    ? rikezeSupplyStation?.oilTanks.map((item) => {
                      return {
                        ...item,
                        isOld:
                          !!(item.name.includes('旧') || item.name.includes('老'))
                      }
                    })
                    : [],
                  charts: rikezeSupplyStation?.chartData || []
                },
                {
                  id: 108,
                  title: '阿里供应站',
                  titleImg: require('./../../assets/data-screen/screen-subtitle-6.png'),
                  path: 'Sc',
                  query: { deptId: 108 },
                  data: aliSupplyStation?.tableData || [],
                  tanks: aliSupplyStation?.oilTanks
                    ? aliSupplyStation?.oilTanks.map((item) => {
                      return {
                        ...item,
                        isOld:
                          !!(item.name.includes('旧') || item.name.includes('老'))
                      }
                    })
                    : [],
                  charts: aliSupplyStation?.chartData || []
                }
              ]
            },
            {
              id: newGuid(),
              title: '双重预防机制',
              titleImg: require('./../../assets/data-screen/screen-title-3.png'),
              children: [
                {
                  id: newGuid(),
                  title: '重大隐患平排查',
                  titleImg: require('./../../assets/data-screen/screen-subtitle-7.png'),
                  path: 'Investigation',
                  data: majorHazardInspection?.tableData || []
                },
                {
                  id: newGuid(),
                  title: '一般隐患治理',
                  titleImg: require('./../../assets/data-screen/screen-subtitle-8.png'),
                  path: 'Investigation',
                  data: generalHazardInspection?.tableData || []
                },
                {
                  id: newGuid(),
                  title: '风险分级管控',
                  titleImg: require('./../../assets/data-screen/screen-subtitle-9.png'),
                  path: 'Control',
                  data: riskLevelManagement?.tableData || []
                }
              ]
            },
            {
              id: newGuid(),
              title: '人员教育培训',
              titleImg: require('./../../assets/data-screen/screen-title-4.png'),
              children: [
                {
                  id: newGuid(),
                  title: '学习资料情况',
                  titleImg: require('./../../assets/data-screen/screen-subtitle-10.png'),
                  path: 'File',
                  data: learningMaterialsStatus?.tableData || []
                },
                {
                  id: newGuid(),
                  title: '人员学习情况',
                  titleImg: require('./../../assets/data-screen/screen-subtitle-11.png'),
                  path: '',
                  data: personnelLearningStatus?.tableData || []
                },
                {
                  id: newGuid(),
                  title: '考试情况',
                  titleImg: require('./../../assets/data-screen/screen-subtitle-12.png'),
                  path: 'Score',
                  data: examStatus?.tableData
                    ? [
                      examStatus?.tableData.map((item, index) => {
                        return {
                          ...item,
                          topThree: examStatus?.tableData
                            .slice(0, 3)
                            .map((itm) => item.userName)
                            .join('<br/>'),
                          lastThree:
                            examStatus?.tableData?.length > 3
                              ? examStatus?.tableData
                                .slice(examStatus?.tableData?.length - 3)
                                .join('<br/>')
                              : ''
                        }
                      })[0]
                    ]
                    : []
                }
              ]
            },
            {
              id: newGuid(),
              title: '设备设施管理',
              titleImg: require('./../../assets/data-screen/screen-title-5.png'),
              path: 'Vehicles',
              children: [
                {
                  id: newGuid(),
                  title: '设备设施管理',
                  titleImg: '',
                  path: '',
                  data: equipmentFacilityManagement?.tableData || []
                }
              ]
            }
          ]
        }
        setTimeout(() => {
          this.pageLoading = false
        }, 500)
      } catch (err) {
        console.log(err)
        this.pageLoading = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  height: calc(100vh - 84px);
  background-color: #000103;
  overflow-y: auto;
  padding: 0;
}

.screen-container {
  min-height: 100vh;
  padding: 80px 20px 20px;
  background-image: url("./../../assets/data-screen/screen-bg-1.jpg");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% auto;
  position: relative;
}

.screen-title {
  height: calc(72 / 1920 * 100vw);
  background-image: url("./../../assets/data-screen/screen-header.png");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% auto;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
}

.screen-content {
  padding: 20px 0;
}

.flex-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  margin-bottom: calc(30 / 1920 * 100vw);

  &:last-of-type {
    margin-bottom: 0;
    margin-top: calc(-20 / 1920 * 100vw);
  }

  &.a-between {
    align-items: space-between;
  }

  &.d-row {
    flex-direction: row;

    .container-box {
      margin-bottom: 0;
    }
  }
}

.line-dash {
  height: 1;
  width: 100%;
  border-top: 1px dashed #5f9dc8;
  margin: calc(20 / 1920 * 100vw) 0;
}
</style>
